<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		<STYLE type=text/css>* {
			margin: 0;
			padding: 0;
			border: 0;
		}

		#fm {
			line-height: 24px;
			list-style-type: none;
			background: #666;
		}

		/*设置盒子的行高，去掉标记，设置背景颜色*/
		#fm a {
			display: block;
			width: 80px;
			text-align: center;
		}

		/*设置A标签为块元素不显示，宽度，居中*/
		#fm a:link {
			color: #666;
			text-decoration: none;
		}

		/* 设置未访问的链接样式*/
		#fm a:visited {
			color: #666;
			text-decoration: none;
		}

		/* 设置已访问的链接样式 */
		#fm a:hover {
			color: #FFF;
			text-decoration: none;
			font-weight: bold;
		}

		/* 当有鼠标悬停在链接上的颜色 */
		#fm li {
			float: left;
			width: 150px;
			background: #CCC;
		}

		#fm li a:hover {
			background: #999;
		}

		#fm li ul {
			line-height: 27px;
			list-style-type: none;
			text-align: left;
			left: -999em;
			width: 80px;
			position: absolute;
		}

		#fm li ul li {
			float: left;
			width: 80px;
			background: #F6F6F6;
		}

		#fm li ul a {
			display: block;
			width: 80px;
			width: 80px;
			text-align: left;
			padding-left: 5px;
		}

		#fm li ul a:link {
			color: #666;
			text-decoration: none;
		}

		#fm li ul a:visited {
			color: #666;
			text-decoration: none;
		}

		#fm li ul a:hover {
			color: #F3F3F3;
			text-decoration: none;
			font-weight: normal;
			background: #C00;
		}

		#fm li:hover ul {
			left: auto;
		}

		#fm li.sfhover ul {
			left: auto;
		}

		#content {
			clear: left;
		}
	</STYLE>
	</style>
	<body>

		　　<UL id=fm>
			<LI><A href="#">一级菜单栏目</A>
				<UL>
					<LI><A href="#">一级菜单目录</A></LI>
					<LI><A href="#">一级菜单目录</A></LI>
					<LI><A href="#">一级菜单目录</A></LI>
					<LI><A href="#">一级菜单目录</A></LI>
				</UL>
			</LI>
			<LI><A href="#">二级菜单栏目</A>
				<UL>
					<LI><A href="#">二级菜单目录</A></LI>
					<LI><A href="#">二级菜单目录</A></LI>
					<LI><A href="#">二级菜单目录</A></LI>
					<LI><A href="#">二级菜单目录</A></LI>
					<LI><A href="#">二级菜单目录</A></LI>
				</UL>
			</LI>
			<LI><A href="#">三级菜单栏目</A>
				<UL>
					<LI><A href="#">三级菜单目录</A></LI>
					<LI><A href="#">三级菜单目录</A></LI>
					<LI><A href="#">三级菜单目录</A></LI>
					<LI><A href="#">三级菜单目录</A></LI>
				</UL>
			</LI>
			<LI><A href="#">四级菜单栏目</A>
				<UL>
					<LI><A href="#">四级菜单目录</A></LI>
					<LI><A href="#">四级菜单目录</A></LI>
					<LI><A href="#">四级菜单目录</A></LI>
					<LI><A href="#">四级菜单目录</A></LI>
				</UL>
			</LI>
		</UL>
		</LI>
		</UL>
	</body>
	<SCRIPT type=text/javascript>
		function menuFix() {
			var sfEls = document.getElementById("fm").getElementsByTagName("li");
			for (var i = 0; i < sfEls.length; i++) {
				sfEls[i].onmouseover = function() {
					this.className += (this.className.length > 0 ? " " : "") + "sfhover";
				}
				sfEls[i].onMouseDown = function() {
					this.className += (this.className.length > 0 ? " " : "") + "sfhover";
				}
				sfEls[i].onMouseUp = function() {
					this.className += (this.className.length > 0 ? " " : "") + "sfhover";
				}
				sfEls[i].onmouseout = function() {
					this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),
						"");
				}
			}
		}
		window.onload = menuFix;
	</SCRIPT>
</html>
